document.addEventListener('DOMContentLoaded', function () {
    // 获取购物车商品
    fetchCartItems();

    // 结算按钮点击事件
    document.getElementById('checkoutBtn').addEventListener('click', checkout);
});

// 获取购物车商品
function fetchCartItems() {
    // 显示加载状态
    const cartItemsContainer = document.getElementById('cartItems');
    cartItemsContainer.innerHTML = '<p style="text-align: center; padding: 20px;">加载中...</p>';

    // 获取购物车商品列表
    fetch('/api/cart')
        .then(response => {
            if (!response.ok) {
                throw new Error('获取购物车商品失败');
            }
            return response.json();
        })
        .then(cartItems => {
            if (cartItems.length === 0) {
                cartItemsContainer.innerHTML = '<p style="text-align: center; padding: 20px;">购物车为空</p>';
                updateCartSummary(0, 0);
                return;
            }

            let cartItemsHTML = '';
            let totalQuantity = 0;
            let totalPrice = 0;

            cartItems.forEach(cartItem => {
                // 计算小计
                const subtotal = cartItem.product.price * cartItem.quantity;
                totalQuantity += cartItem.quantity;
                totalPrice += subtotal;

                // 创建购物车商品HTML
                cartItemsHTML += `
                <div class="cart-item">
                    <img src="${cartItem.product.image}" alt="${cartItem.product.name}" class="cart-item-image">
                    <div class="cart-item-details">
                        <h3 class="cart-item-name">${cartItem.product.name}</h3>
                        <p class="cart-item-price">¥${cartItem.product.price.toFixed(2)}</p>
                    </div>
                    <div class="quantity-container">
                        <button class="quantity-btn decrease" data-id="${cartItem.id}">-</button>
                        <input type="text" class="quantity-input" value="${cartItem.quantity}" data-id="${cartItem.id}">
                        <button class="quantity-btn increase" data-id="${cartItem.id}">+</button>
                    </div>
                    <p class="cart-item-total">¥${subtotal.toFixed(2)}</p>
                    <button class="remove-btn" data-id="${cartItem.id}">移除</button>
                </div>
                `;

                // 添加数量变更事件监听器
                document.addEventListener('click', function (event) {
                    if (event.target.classList.contains('quantity-btn')) {
                        handleQuantityChange(event.target, cartItem.id);
                    }
                });

                // 添加移除按钮事件监听器
                document.addEventListener('click', function (event) {
                    if (event.target.classList.contains('remove-btn')) {
                        removeCartItem(event.target.dataset.id);
                    }
                });
            });

            cartItemsContainer.innerHTML = cartItemsHTML;
            updateCartSummary(totalQuantity, totalPrice);
        })
        .catch(error => {
            console.error('获取购物车商品出错:', error);
            cartItemsContainer.innerHTML = '<p style="text-align: center; padding: 20px;">获取购物车商品出错</p>';
        });
}

// 更新购物车商品数量
function handleQuantityChange(button, cartItemId) {
    const action = button.classList.contains('increase') ? 'increase' : 'decrease';
    const quantityInput = button.parentElement.querySelector('.quantity-input');
    let quantity = parseInt(quantityInput.value);

    if (action === 'increase') {
        quantity++;
    } else if (action === 'decrease' && quantity > 1) {
        quantity--;
    }

    quantityInput.value = quantity;

    // 更新购物车商品数量
    updateCartItemQuantity(cartItemId, quantity);
}

// 更新购物车商品数量
function updateCartItemQuantity(cartItemId, quantity) {
    fetch(`/api/cart/update/${cartItemId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({quantity}),
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('更新购物车商品数量失败');
            }
            return response.json();
        })
        .then(data => {
            console.log('购物车商品数量更新成功:', data);
        })
        .catch(error => {
            console.error('更新购物车商品数量出错:', error);
        });
}

// 移除购物车商品
function removeCartItem(cartItemId) {
    if (confirm('确定要移除该商品吗?')) {
        fetch(`/api/cart/delete/${cartItemId}`, {
            method: 'DELETE',
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('移除购物车商品失败');
                }
                return response.json();
            })
            .then(data => {
                console.log('购物车商品移除成功:', data);
                fetchCartItems(); // 重新加载购物车商品
            })
            .catch(error => {
                console.error('移除购物车商品出错:', error);
            });
    }
}

// 更新购物车总计
function updateCartSummary(totalQuantity, totalPrice) {
    document.getElementById('totalQuantity').textContent = totalQuantity;
    document.getElementById('totalPrice').textContent = `¥${totalPrice.toFixed(2)}`;
}

// 结算
function checkout() {
    // 获取购物车商品
    fetch('/api/cart')
        .then(response => {
            if (!response.ok) {
                throw new Error('获取购物车商品失败');
            }
            return response.json();
        })
        .then(cartItems => {
            if (cartItems.length === 0) {
                alert('购物车为空，无法结算');
                return;
            }

            // 这里可以跳转到结算页面或提交订单
            alert('结算功能将在此实现');
            console.log('购物车商品:', cartItems);
        })
        .catch(error => {
            console.error('结算出错:', error);
        });
}